<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js 图表点击事件测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f9;
        }

        #chart-container {
            width: 80%;
            max-width: 600px;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>

<body>
    <div id="chart-container">
        <canvas id="myChart"></canvas>
    </div>

    <script>
        // 创建图表数据
        const data = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [{
                label: "My First dataset",
                backgroundColor: "rgba(75,192,192,0.2)",
                borderColor: "rgba(75,192,192,1)",
                data: [65, 59, 80, 81, 56, 55, 40]
            }]
        };

        // 获取上下文
        const ctx = document.getElementById("myChart").getContext("2d");

        // 创建图表
        const myChart = new Chart(ctx, {
            type: 'bar',
            data: data,
            options: {
                onClick: function (evt) {
                    console.log(evt);
                    // alert("点击了图表:" + evt);
                }
            }
        });
        // 监听画布点击事件
        ctx.canvas.addEventListener('click', (event) => {
            // 获取点击坐标
            const rect = ctx.canvas.getBoundingClientRect();
            const mouseX = event.clientX - rect.left;
            const mouseY = event.clientY - rect.top;

            // 检测是否点击 X 轴标签
            const xAxis = myChart.scales.x;
            const xLabelIndex = getClickedLabelIndex(xAxis, mouseX, mouseY);
            if (xLabelIndex !== -1) {
                const label = data.labels[xLabelIndex];
                alert(`点击 X 轴标签: ${label}`);
                return;
            }

            // 检测是否点击 Y 轴标签
            const yAxis = myChart.scales.y;
            const yLabelIndex = getClickedLabelIndex(yAxis, mouseX, mouseY);
            if (yLabelIndex !== -1) {
                const label = yAxis.ticks[yLabelIndex].value;
                alert(`点击 Y 轴标签: ${label}`);
            }
        });

        // 检测点击位置的标签索引
        function getClickedLabelIndex(axis, mouseX, mouseY) {
            if (axis.axis === 'x') {
                // X 轴标签检测
                const ticks = axis.ticks;
                for (let i = 0; i < ticks.length; i++) {
                    const tick = ticks[i];
                    const labelX = tick.labelX;
                    const labelY = tick.labelY;
                    const labelWidth = axis.getLabelWidth(tick.label);
                    const labelHeight = axis.options.ticks.font.size;

                    // 计算标签区域
                    const minX = labelX - labelWidth / 2;
                    const maxX = labelX + labelWidth / 2;
                    const minY = labelY - labelHeight;
                    const maxY = labelY + labelHeight;

                    if (mouseX >= minX && mouseX <= maxX && mouseY >= minY && mouseY <= maxY) {
                        return i;
                    }
                }
            } else if (axis.axis === 'y') {
                // Y 轴标签检测
                const ticks = axis.ticks;
                for (let i = 0; i < ticks.length; i++) {
                    const tick = ticks[i];
                    const labelX = tick.labelX;
                    const labelY = tick.labelY;
                    const labelWidth = axis.getLabelWidth(tick.label);
                    const labelHeight = axis.options.ticks.font.size;

                    // 计算标签区域
                    const minX = labelX - labelWidth;
                    const maxX = labelX;
                    const minY = labelY - labelHeight / 2;
                    const maxY = labelY + labelHeight / 2;

                    if (mouseX >= minX && mouseX <= maxX && mouseY >= minY && mouseY <= maxY) {
                        return i;
                    }
                }
            }
            return -1; // 未点击标签
        }
    </script>
</body>

</html>